<template>
	<view class="content">
		<view class="zjc-rb">
			<uni-swiper-dot :info="goodImages" :current="current" field="content" mode="default">
				<swiper class="swiper-box" @change="change" autoplay="true" interval="3000">
					<swiper-item v-for="(item ,index) in goodImages" :key="index">
						<image style="width: 750rpx; height: 600rpx;" :src="item" alt="" mode="aspectFill">
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<view class="good-detail-context">
			<view class="good-detail-header">
				<view class="t-goods-price">
					<text class="t-rmb">¥</text>
					<text class="t-p1">{{goodsInfo.goodsPrice}}</text>
					<text class="t-p2">¥{{goodsInfo.goodsOriginPrice}}</text>
				</view>
				<view style="margin-left: 20rpx;">
					<view class="t-goods-name" style="font-size: 30rpx;"><text>{{goodsInfo.goodsName}}</text></view>
					<view class="t-goods-desc"><text>{{goodsInfo.goodsDesc}}</text></view>
					<view class="t-goods-tags">
						<view class="t-tag" style="color: #00ed0c;">
							<text>{{goodsInfo.type==1?'文创商品':'当地特产'}}</text>
						</view>
						<view class="t-tag" style="color: #00ed0c;">
							<text>包邮</text>
						</view>
					</view>

				</view>

			</view>
			<view style="width: 100%; height: 20rpx; background-color: #f1f1f1f1; margin-top: 65rpx;">

			</view>
			<view class="good-detail-mid">
				<view>
					<text style="font-size: 36rpx; font-weight: 700;">发货地址：{{goodsBelong}}</text>

				</view>
				<view>
					<text style="font-size: 24rpx; color: gray;">服务电话：{{goodsPhone}}</text>
				</view>
			</view>
			<view style="margin-left: 30rpx; margin-top: 20rpx;">
				<text style="font-size: 36rpx; font-weight: 700;">商品详情</text>
			</view>
			<view class="good-detail-desc">
				<image :src="goodDetailImage" mode="widthFix" width="100%" style="margin: 0 auto;"></image>
			</view>
		</view>
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 1,
				goodsId: 1,
				goodsBelong: "张家界永定区",
				goodsPhone: '13477668843',
				goodsInfo: {
					goodsId: 1,
					goodsPic: '/static/goods/11.jpg',
					goodsName: 'Helmetphone MT1 Neo智能骑行头盔(山地/框宽度）',
					goodsDesc: '一键语音',
					type: 2,
					goodsPrice: 59,
					goodsOriginPrice: 89,
				},
				goodImages: [
				],

				goodDetailImage: '/static/goods/1.jpg',
				options: [{
					icon: 'cart',
					text: '购物车',
					info: 0
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				],
			}
		},
		onLoad(e) {
			console.log("weizhi" + e.goodsId)
			//善待完善：
			
			this.goodsId = e.goodsId
			if(parseInt(e.goodsId)==110){
				this.goodDetailImage = '../../static/jnb.png'
			}else if(parseInt(e.goodsId)==1152592476){
				this.goodDetailImage = '../../static/bxt.png'
			}else{
				this.goodDetailImage = '../../static/sq.png'
			}
			this.request({

				url: "/goods-info/detail",
				method: 'GET',
				data: {
					goodsId: e.goodsId
				}
			}).then(res => {
				if (res.code === '1') {
					console.log("成功")
					console.log(res.data)
					if (res.data !== null)
						this.goodsInfo = res.data

				} else {
					console.log("失败")
				}
			}).catch(() => {
				console.log("系统错误")
			})
			
			
			this.request({
			
				url: "/goods-info/moreImg",
				method: 'GET',
				data: {
					goodsId: e.goodsId
				}
			}).then(res => {
				if (res.code === '1') {
					console.log("成功")
					console.log(res.data)
					if (res.data !== null){
						this.goodImages = res.data
					}
					
			
				} else {
					console.log("失败")
				}
			}).catch(() => {
				console.log("系统错误")
			})
			
		},
		methods: {
			change(e) {
				this.current = e.detail.current
			},
			onClick(e) {
				console.log("跳转购物车")
				uni.navigateTo({
					url: "/pages/cart/cart"
				})
			},
			buttonClick(e) {

				if (e.content.text === '立即购买') {
					var selectedData = []
					var d = {
						userId: 1,
						cartId: 1,
						goodsId: 1,
						goodsSelected: false,
						goodsInfo: {
							goodsId: 1,
							goodsPic: '/static/goods/11.jpg',
							goodsName: 'Helmetphone MT1 Neo智能骑行头盔(山地/框宽度）',
							goodsDesc: '一键语音',
							type: 2,
							goodsPrice: 59,
							goodsOriginPrice: 89,
						},
						goodsNum: 1
					}
					d.goodsInfo = this.goodsInfo
					d.goodsSelected = true
					d.goodsId = this.goodsId
					selectedData.push(d)
					this.$store.commit("setSelectedData", selectedData)
					uni.navigateTo({
						url: "/pages/create-order/create-order"
					})
				} else if (e.content.text == "加入购物车") {

					//发送请求，把goodId,userId当做参数，redis缓存商品信息
					this.request({
						url: "/cart/goods-add",
						method: 'PUT',
						data: {
							goodsId: this.goodsId
						}
					}).then(res => {
						if (res.code === '1') {
							this.options[0].info = res.data
							console.log("成功")
						} else {
							console.log("失败")
						}
					}).catch(() => {
						console.log("系统错误")
					})
					console.log("加入购物车")


				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zjc-rb {
		width: 100%;
		height: 600rpx;
		margin: 0 0;
	}

	.swiper-box {
		width: 100%;
		height: 600rpx;
	}

	.content {
		box-sizing: border-box;
		min-width: 100vw;
		min-height: 100vh;
		background-color: #f2f3f5;
		padding-bottom: 80rpx;
	}

	.good-detail-context {
		position: absolute;
		top: 550rpx;
		width: 100%;
		background-color: #fff;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.good-detail-header {
		background-color: #fff;

	}

	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0;
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}

	.good-detail-mid {
		margin-top: 30rpx;
		padding-bottom: 20rpx;
		margin-left: 30rpx;
	}

	.good-detail-desc {
		width: 86%;

		margin: 0 auto;
		margin-top: 30rpx;
	}

	.t-goods-price {
		margin-top: 20rpx;
		margin-left: 20rpx;
		padding: 0rpx 18rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		width: 100%;

		.t-rmb {
			font-size: 30rpx;
			color: #00de0d;
		}

		.t-p1 {
			font-size: 42rpx;
			color: #00de0d;
			margin-left: 4rpx;
			font-weight: bold;
		}

		.t-p2 {
			font-size: 20rpx;
			color: #999999;
			margin-left: 10rpx;
			text-decoration: line-through;
		}
	}

	.t-goods-name {
		font-size: 26rpx;
		font-weight: 700;
		color: #000000;
		line-height: 30rpx;
		-webkit-line-clamp: 2;
		display: -webkit-box;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		padding: 0rpx 18rpx;
		box-sizing: border-box;
		word-break: break-all;
	}

	.t-goods-desc {
		font-size: 24rpx;
		color: #9e9e9e;
		line-height: 26rpx;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		text-overflow: ellipsis;
		overflow: hidden;
		-webkit-box-orient: vertical;
		padding: 0rpx 18rpx;
		box-sizing: border-box;
		margin-top: 16rpx;
		word-break: break-all;
	}

	.t-goods-tags {
		padding: 0rpx 18rpx;
		box-sizing: border-box;
		margin-top: 16rpx;

		.t-tag {
			font-size: 20rpx;
			border-radius: 4rpx;
			border: 1rpx solid;
			box-sizing: border-box;
			padding: 3rpx 5rpx;
			-webkit-line-clamp: 1;
			display: -webkit-box;
			text-overflow: ellipsis;
			overflow: hidden;
			-webkit-box-orient: vertical;
			float: left;
			word-break: break-all;

			&:not(:last-child) {
				margin-right: 8rpx;
			}
		}
	}
</style>